@extends('backend.layouts.app')

@section('style')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="{{ asset('assets/backend/assets/css/apps/mailing-chat.css') }}" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL STYLES -->
@endsection

@section('content')
    <div class="layout-px-spacing">

        <div class="chat-section layout-top-spacing">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class="chat-system">
                        <div class="user-list-box">
                            <div class="people">
                            </div>
                        </div>
                        <div class="chat-box">
                            <div class="chat-box-inner">
                                <div class="chat-meta-user">
                                    <div class="current-chat-user-name"><span><img src="{{ asset('assets/backend/assets/img/90x90.jpg') }}" alt="dynamic-image"><span class="name"></span></span></div>

                                    <div class="chat-action-btn align-self-center">
                                        <div class="dropdown d-inline-block">
                                            <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </a>

                                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink-2">
                                                <a class="dropdown-item" href="javascript:void(0);">
                                                    <i class="fa fa-close"></i> 关闭当前聊天
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="chat-conversation-box">
                                    <div id="chat-conversation-box-scroll" class="chat-conversation-box-scroll">
                                    </div>
                                </div>
                                <div class="chat-footer">
                                    <div class="chat-input">
                                        <form class="chat-form" action="javascript:void(0);">
                                            <i class="fa fa-commenting-o"></i>
                                            <input type="text" class="mail-write-box form-control" placeholder="Message"/>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script>
        window.customer_id = '{{ $customer_info['id'] }}'
        window.user_type = 2
        window.socket_url = 'ws://{{env('WEB_SOCKET_HOST') . ':' . env('WEB_SOCKET_PORT')}}'
    </script>
    <script src="{{ asset('assets/backend/assets/js/web-socket/message.js') }}"></script>
    <script src="{{ asset('assets/backend/assets/js/web-socket/customer.js') }}"></script>
@endsection
